<template>

  <el-container style="overflow: hidden; height: 100%; width: 100%; ">

    <el-header height="auto" style=" border-bottom: 1px solid #060f1a12; ">
      <api-header></api-header>
    </el-header>

    <el-container class="appi-body-contaniner">

      <!-- 接口-->

      <el-aside :width="showMainMenuPanel ? '200px' : '0'" class="api-main-container-menu">
        <div v-show="showMainMenuPanel">
        <!-- <div>开发指南</div>-->
        <nav-menu ref="navMenu_read_me" v-on:treeNodeClick="handleNodeClick" :menuData="docMenuList"
          expandAll></nav-menu>

        <div style="padding: 10px 10px 0px 10px; border-top: 1px solid #eaeaea; width: 88%; color: #666;">ERP 接口清单
        </div>
        <nav-menu ref="navMenu_erp" v-on:treeNodeClick="handleNodeClick" :menuData="erpGroups"></nav-menu>

        <div style="padding: 10px 10px 0px 10px; border-top: 1px solid #eaeaea; width: 88%; color: #666;">WMS 接口清单
        </div>
        <nav-menu ref="navMenu_wms" v-on:treeNodeClick="handleNodeClick" :menuData="wmsGroups"></nav-menu>
      </div>
        <div class="focus-panel-expand" @click="changeExpandStatus">
          <i :class="showMainMenuPanelIcon"></i>
        </div>

      </el-aside>

      <el-main class="api-main-container">

        <doc-readme v-if="chooseDocUrl == '/api_doc/readme'" type="readme"></doc-readme>
        <doc-sign v-else-if="chooseDocUrl == '/api_doc/sign'" type="sign"></doc-sign>
        <api-doc v-else :apiData="chooseApiData"></api-doc>

      </el-main>

    </el-container>

  </el-container>

</template>


<script>

import Vue from 'vue'

import NavMenu from './api_sub/api-menu.vue'

import ApiItem from './api_sub/api-item.vue'

import ApiPortal from './api_sub/api-portal.vue'

import ApiConfig from './api_sub/api-config.vue'

import ApiLog from './api_sub/api-log.vue'

import ApiDoc from './api_sub/api-doc.vue'

import ApiHeader from '../layout/api-header.vue'

import MarkdownView from './content/readme.vue'


import DocReadme from './content/readme.vue'

import DocSign from './content/sign.vue'

export default {

  components: { ApiLog, ApiPortal, NavMenu, ApiItem, ApiConfig, ApiDoc, ApiHeader, DocReadme, DocSign },

  data() {

    let portalUrl = 'portal';
    let portalTabId = 'tab--' + portalUrl.split('/').join('___') + '--{}'

    return {

      chooseApiData: {},

      apiVersion: '',
      docMenuList: [{
        "name": "开发指南",
        "children": [
          {
            "apiName": "开发前必读",
            "apiUrl": "/api_doc/readme"
          },
          {
            "apiName": "接口鉴权",
            "apiUrl": "/api_doc/sign"
          }, {
            "apiName": "接口调试工具",
            "apiUrl": "/api_doc/debug_util"
          }]
      }],
      chooseDocUrl: '',

      // 接口 map 缓存
      apiCacheMap: {},

      apiTypeMap: {},

      erpGroups: [],
      wmsGroups: [],
      showMainMenuPanel: true,
      showMainMenuPanelIcon: "el-icon-arrow-right",

    }
  },

  created() {

    var _this = this


    this.docMenuList.forEach(group => {
      group.children.forEach(doc => {
        _this.apiTypeMap[doc.apiUrl] = 'DOC'
      })
    })

    _this.$getAllDocs(function (docs) {

      // console.log(docs)

      _this.erpGroups = docs.ERP
      _this.wmsGroups = docs.WMS

      _this.erpGroups.forEach(group => {
        group.children.forEach(c => {
          _this.apiCacheMap[c.apiUrl] = c
          _this.apiTypeMap[c.apiUrl] = 'ERP'
        })
      })
      _this.wmsGroups.forEach(group => {
        group.children.forEach(c => {
          _this.apiCacheMap[c.apiUrl] = c
          _this.apiTypeMap[c.apiUrl] = 'WMS'
        })
      })

      _this.initIndexPage()
    })


  },

  mounted() {

  },

  methods: {
    changeExpandStatus() {
      this.showMainMenuPanel = !this.showMainMenuPanel;

      if (this.showMainMenuPanel) {
        this.showMainMenuPanelIcon = "el-icon-arrow-right";
      } else {
        this.showMainMenuPanelIcon = "el-icon-arrow-left";
      }
    },
    addCmpTab(cmpObj) {
      cmpObj.type = 'cmp'
      this.handleNodeClick(cmpObj)
    },

    initIndexPage() {

      let _this = this

      // 初始加载
      let currentPathname = window.location.pathname

      // console.log('currentPathname', currentPathname)

      let apiType = _this.apiTypeMap[currentPathname]

      let uri = null
      if (apiType == 'DOC') {
        uri = currentPathname
      }
      else {

        if (currentPathname.indexOf('/api_doc') == -1 || currentPathname.indexOf('/api_doc') != 0) {
          uri = '/api_doc/readme'
        }
        else {
          let sub = currentPathname.substring('/api_doc'.length)
          if (_this.apiTypeMap[sub]) {
            uri = sub
          }
          else {
            uri = '/api_doc/readme'
            // console.log('wrong url')
          }
        }
      }

      _this.handleNodeClick({ 'uri': uri })

    },

    filterMenu() {
      let _this = this
    },

    handleNodeClick(treeNode) {

      let _this = this

      // console.log(treeNode)

      //
      if (treeNode.uri == '/api_doc/debug_util') {
        _this.$jump('/debug_util')
        return
      }

      if (!treeNode.uri) {
        _this.chooseApiData = {}
        _this.chooseDocUrl = ''
        return
      }

      let urlType = _this.apiTypeMap[treeNode.uri]

      if (urlType == 'DOC') {
        _this.chooseDocUrl = treeNode.uri
        _this.chooseApiData = {}
        _this.$refs['navMenu_read_me'].setActive(_this.chooseDocUrl)
        _this.$refs['navMenu_erp'].setActive('')
        _this.$refs['navMenu_wms'].setActive('')
      }
      else if (urlType == 'ERP') {
        _this.chooseDocUrl = treeNode.uri
        _this.chooseApiData = _this.apiCacheMap[treeNode.uri]
        _this.$refs['navMenu_read_me'].setActive('')
        _this.$refs['navMenu_erp'].setActive(_this.chooseDocUrl)
        _this.$refs['navMenu_wms'].setActive('')
      }
      else if (urlType == 'WMS') {
        _this.chooseDocUrl = treeNode.uri
        _this.chooseApiData = _this.apiCacheMap[treeNode.uri]
        _this.$refs['navMenu_read_me'].setActive('')
        _this.$refs['navMenu_erp'].setActive('')
        _this.$refs['navMenu_wms'].setActive(_this.chooseDocUrl)
      }

      _this.$jump('/api_doc' + treeNode.uri)

    },
    tabAdd(data) {
    },

    handleCommand(command) {
      if (!command) {
        return
      }
    },

    openNewUrl(url) {

      window.open(url)
    },

    openDownload() {
      window.open($portal_context + '/document/AutoDocumentRpc/export.json')
    },

    apiRouteReplace(pageObj) {
      let url = window.location.pathname
      this.$router.replace({
        path: url + '?m=' + pageObj.path
      })

    }


  }
}

</script>
<style>
.appi-body-contaniner {
  overflow: hidden;
  width: 1200px;
  margin-left: 50%;
  left: -600px;
  position: relative;
}

@media screen and (max-width: 1200px) {
  .appi-body-contaniner {
    width: 100%;
    margin-left: 0;
    left: 0;
  }
}

/* menu */
.api-main-container-menu {
  border-right: 1px solid #E4E7ED;
  /*padding: 10px 0px 10px 0px;*/
  margin-bottom: 10px;
  margin-top: 10px;
  overflow: initial;
  position: relative;
}

.api-main-container-menu,
.app-menu-spliter-div,
.api-main-container-menu .el-menu,
.api-main-container-menu .el-menu .el-submenu__title {
  background-color: #fff;
}

.api-main-container-menu .el-menu-item-group__title {
  padding: 0px;
}

.comment_table {
  background-color: #ccc;
  width: 100%;
}

.comment_table td {
  padding: 5px 5px 5px 10px;
  background-color: #fff;
  font-size: 14px;
  line-height: 24px;
}

.comment_table .table_head td {
  background-color: #fcfbfb;
  font-size: 14px;
  line-height: 24px;
}


.api-doc-wrapper {
  display: flex;
  flex-direction: column;
}

.focus-panel-expand {
  position: absolute;
  top: 47%;
  right: -10px;
  width: 10px;
  padding: 10px 0;
  background-color: #151b25;
  cursor: pointer;
  -webkit-transition: right 0.3s;
  -o-transition: right 0.3s;
  -moz-transition: right 0.3s;
  transition: right 0.3s;
  color: #fff;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  z-index: 2001;
}

.focus-panel-expand:before {
  border-top: 12px solid #151b25;
  border-left: 10px solid transparent;
  bottom: -16px;
  box-sizing: border-box;
  content: "";
  position: absolute;
  display: block;
  height: 16px;
  width: 10px;
  right: 0;
}

.focus-panel-expand:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  display: block;
  height: 16px;
  width: 10px;
  border-left: 10px solid transparent;
  border-bottom: 12px solid #151b25;
  top: -16px;
  right: 0;
}
</style>
